<template>
  <div class="md:grid grid-rows-3 grid-cols-2">
    <!-- <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
        :loading="loading"
        class="md: w-full !md:mt-0"
        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0, background: item.color }"
      >
        <div class="px-4 flex justify-between items-center">
          <CountTo :startVal="1" :endVal="item.value" class="text-2xl" />
        </div>

        <div class="px-4 flex justify-between">
          <span>总{{ item.title }}</span>
        </div>
      </Card>
    </template> -->

    <Card
      size="small"
      :loading="loading"
      class="md: w-full !md:mt-0"
      v-for="(item, index) in counts"
      :key="index"
    >
      <div class="px-4 flex justify-between items-center">
        <CountTo :startVal="0" :endVal="item.value" class="text-2xl" />
      </div>

      <div class="px-4 flex justify-between">
        <span>{{ item.label }}</span>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { CountTo } from '/@/components/CountTo/index';
// import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
import { defHttp } from '/@/utils/http/axios';
import { ref } from 'vue';

defineProps({
  loading: {
    type: Boolean,
  },
});

const counts = ref([]);

defHttp.get({ url: '/Dashbord/get-statistics' }).then((res) => {
  counts.value = [
    { value: res.data.projectTotal, label: '项目数量' },
    { value: res.data.dtuTotal, label: 'DTU 数量' },
    { value: res.data.gatherDeviceTotal, label: '采集器数量' },
    { value: res.data.sensorTotal, label: '传感器数量' },
    { value: res.data.dataTotal, label: '数据数量' },
    { value: res.data.warnTotal, label: '告警数量' },
  ];
});
</script>
